<template>
    <view>
        <u-navbar :is-back="true" :title="navbar.title" :background="navbar.background">
        </u-navbar>
        <view class="u-page">
            <view class="wrap">
                <u-form label-width="150">
                                                    <u-form-item :label="$t('system.msg.msgType')" prop="msgType">
                                    <u-input disabled v-model="msgInfo.msgType" type="text" :placeholder="$t('system.msg.msgType')"
                                             @click="msgTypeClick"></u-input>
                                    <z-multi-choose activeColor="red" :selectedData="msgInfo.msgTypeList" idKey="dictKey"
                                                    showKey="dictValue" :list="msgTypeList" :show="msgTypeSelectShow" @maskTouch="cancle"
                                                    @sure="msgTypeConfirm" @cancle="msgTypeCancle"></z-multi-choose>
                                </u-form-item>
                                <u-form-item :label="$t('system.msg.msgSender')" prop="msgSender">
                                    <u-input ref="msgSender" v-model="msgInfo.msgSender" type="text"></u-input>
                                </u-form-item>
                                <u-form-item :label="$t('system.msg.msgReceiver')" prop="msgReceiver">
                                    <u-input ref="msgReceiver" v-model="msgInfo.msgReceiver" type="text"></u-input>
                                </u-form-item>
                                <u-form-item :label="$t('system.msg.msgCode')" prop="msgCode">
                                    <u-input ref="msgCode" v-model="msgInfo.msgCode" type="text"></u-input>
                                </u-form-item>
                                <u-form-item :label="$t('system.msg.msgTitle')" prop="msgTitle">
                                    <u-input ref="msgTitle" v-model="msgInfo.msgTitle" type="text"></u-input>
                                </u-form-item>
                                <u-form-item :label="$t('system.msg.msgContent')" prop="msgContent">
                                    <u-input ref="msgContent" v-model="msgInfo.msgContent" type="text"></u-input>
                                </u-form-item>
                                <u-form-item :label="$t('system.msg.msgStatus')" prop="msgStatus">
                                    <u-input disabled v-model="msgInfo.msgStatus" type="text" :placeholder="$t('system.msg.msgStatus')"
                                             @click="msgStatusClick"></u-input>
                                    <z-multi-choose activeColor="red" :selectedData="msgInfo.msgStatusList" idKey="dictKey"
                                                    showKey="dictValue" :list="msgStatusList" :show="msgStatusSelectShow" @maskTouch="cancle"
                                                    @sure="msgStatusConfirm" @cancle="msgStatusCancle"></z-multi-choose>
                                </u-form-item>
                                <u-form-item :label="$t('system.msg.msgContentHtml')" prop="msgContentHtml">
                                    <u-input ref="msgContentHtml" v-model="msgInfo.msgContentHtml" type="text"></u-input>
                                </u-form-item>
                </u-form>
                <u-button shape="circle" @click="saveOrUpdate">{{ $t('system.submit') }}</u-button>
            </view>
        </view>
        <footerBar></footerBar>
    </view>
</template>

<script>
    import request from "utils/request.js"
    import cascader from '@/components/yunmiao-cascader/yunmiao-cascader.vue';
    import ldSelect from '@/components/ld-select/ld-select.vue';
    import zMultiChoose from '@/components/z-multi-choose/z-multi-choose.vue';
    export default {
        components: {
            cascader,
            ldSelect
        },
        data() {
            return {
                msgInfo: {

                },
                msgTypeSelectShow: false,
                msgTypeList: [],
                msgStatusSelectShow: false,
                msgStatusList: [],
                navbar: {
                    title: this.$t('system.msg.msgEdit'),
                    background: {
                        backgroundColor: '#001f3f',
                        backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
                    }
                }
            }
        },
        onLoad(data) {
            this.msgInfo = JSON.parse(data.msgInfo)
            this.getmsgTypeList();
            this.getmsgStatusList();

        },
        methods: {
            this.getmsgTypeList(){
                request({
                    url: '/system/dict/query?dictGroupKey=msgType',
                    method: 'post',
                    params: {}
                }).then(response => {
                    this.msgTypeList = response.data
                })
            },
            msgTypeClick() {
                this.msgTypeSelectShow = true
            },
            msgTypeConfirm(data) {
                this.msgInfo.msgType = data.idArr.toString()
                this.msgInfo.msgTypeNames = data.textArr.toString()
                this.msgTypeSelectShow = false
            },
            msgTypeCancle() {
                this.msgTypeSelectShow = true
            },
            this.getmsgStatusList(){
                request({
                    url: '/system/dict/query?dictGroupKey=msgStatus',
                    method: 'post',
                    params: {}
                }).then(response => {
                    this.msgStatusList = response.data
                })
            },
            msgStatusClick() {
                this.msgStatusSelectShow = true
            },
            msgStatusConfirm(data) {
                this.msgInfo.msgStatus = data.idArr.toString()
                this.msgInfo.msgStatusNames = data.textArr.toString()
                this.msgStatusSelectShow = false
            },
            msgStatusCancle() {
                this.msgStatusSelectShow = true
            },
            // 保存或更新
            saveOrUpdate() {
                var url = '/system/msg/insert';
                if (this.msgInfo.msgId) {
                    url = '/system/msg/update';
                }
                request({
                    url: url,
                    method: 'post',
                    data: this.msgInfo
                }).then(response => {
                    this.$u.route({
                        url: "/pages/system/msg/msg-list"
                    })
                })
            }
        }
    }
</script>

<style>
    .wrap {
        padding: 40rpx;
    }
</style>
